import { PureComponent, Fragment } from "react"
import { InputItem } from "antd-mobile"
import { isNull } from "../../utils/helper"
import MyDataSendBox from "./MyForm/MyDataSendBox"
interface Props {
	isReset: boolean,
	value: any,
	getFieldDecorator: Function,
	field: string[],
	defaultFormData: object,
	label?: any,
	required?: any,
	show_label?: any,
	label_text_color?: any
}
interface State {
	hasError: boolean,
	errorMsg: string
}
export default class MiDataSendBox extends PureComponent<Props, State> {
	public state: State = {
		hasError: false,
		errorMsg: ""
	}

	componentWillReceiveProps(next: Props) {
		let { isReset: oldReset } = this.props;
		let { isReset: newReset } = next;
		if (oldReset !== newReset && newReset) {
			this.setState({
				hasError: false
			})
		}
	}

	render() {
		let { getFieldDecorator, field, defaultFormData, label, required, show_label, label_text_color } = this.props;

		let isShowLabel = isNull(show_label) || show_label == 1
		let { hasError, errorMsg } = this.state;
		let isRequired = required == 1;
		let requiredClass = ""
		if (isRequired) {
			requiredClass = "required"
		}

		return (
			<div>
				{
					getFieldDecorator(field[0], {
						initialValue: defaultFormData[field[0]],
						rules: [{
							validator: (rule, value, callback) => {
								if (isRequired) {
									if (isNull(value)) {
										if (!hasError) {
											this.setState({
												hasError: true,
												errorMsg: "请选择：" + label
											})
											callback("请选择：" + label)
										}
									}
									else {
										this.setState({
											hasError: false,
											errorMsg: ""
										})
										callback()
									}
								}
								callback()
							}
						}]
					})(<MyDataSendBox {...this.props} hasError={hasError} errorMsg={errorMsg}>
					</MyDataSendBox>)
				}
			</div>
		)
	}
}